<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Demo</title>
	
<style type="text/css">

#nav {
  background-color:black;
  color:white;
  font:normal 10px Arial,Sans-Serif;
  text-transform:uppercase;
}

#nav ul {
  margin:0px 0px;
  padding:0px 0px;
  height:30px;
}

#nav li {
  margin:0px 0px;
  padding:0px 0px;
  float:left;
  display:inline;
  list-style:none;
  position:relative;
}

#nav li.sc {float:right;}

#nav a, #nav li.sc form {
  display:block;
  padding:0px 15px;
  line-height:30px;
  text-decoration:none;
  background-color:black;
  color:white;
}

#nav a:hover {
  background-color:darkblue;
}

#nav li ul {
  width:170px;
  height:auto;
  position:absolute;
  top:100%;
  left:0px;
  z-index:10;
  display:none;
}

#nav li li {
  display:block;
  float:none;
}

#nav li:hover > ul {
  display:block;
}

#nav li ul ul {
  left:100%;
  top:0px;
}

#nav li.sc input[type="text"] {
  border:1px solid #333;
  background-color:white;
  padding:2px 5px;
  font:normal 11px Verdana,Arial,Sans-Serif;
  display:inline-block;
  margin:0px 0px 3px;
  vertical-align:middle;
}

</style>
	
</head>
<body>

<nav id="nav">
	<ul>
		<li><a href="#">Beranda</a></li>
		<li><a href="#">Profil</a>
			<ul>
				<li><a href="#">Submenu 1</a></li>
				<li><a href="#">Submenu 2</a></li>
				<li><a href="#">Submenu 3</a></li>
				<li><a href="#">Submenu 4</a></li>
			</ul>
		</li>
		<li><a href="#">Jurnal</a>
			<ul>
				<li><a href="#">Submenu 1</a></li>
				<li><a href="#">Submenu 2</a></li>
				<li><a href="#">Submenu 3</a></li>
				<li><a href="#">Submenu 4</a></li>
			</ul>
		</li>
		<li><a href="#">Komentar</a>
			<ul>
				<li><a href="#">Submenu 1</a></li>
				<li><a href="#">Submenu 2</a>
					<ul>
						<li><a href="#">Submenu 2.1</a></li>
						<li><a href="#">Submenu 2.2</a></li>
						<li><a href="#">Submenu 2.3</a></li>
						<li><a href="#">Submenu 2.4</a></li>
					</ul>
				</li>
				<li><a href="#">Submenu 3</a></li>
				<li><a href="#">Submenu 4</a></li>
			</ul>
		</li>
		<li class="sc"><form><input type="text" /></form>></li>
	</ul>
</nav>


</body>
</html>